<!DOCTYPE html>
<html  xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:include="_header_include::frag(~{::title},~{},~{})">
    <title>表格操作</title>
</head>
<body>
<div id="tableOpt">
	 <template>
	  <el-table id="customerTable"
	    ref="multipleTable"
	    :data="tableData3"
	    tooltip-effect="dark"
	    style="width: 100%,height:650px"
	    @select="selectRow"
	    @selection-change="handleSelectionChange">
	    
	    <el-table-column type="selection" width="55" prop="id"> </el-table-column>
	    
	    <el-table-column label="区域" width="120">
	      <template slot-scope="scope">{{ scope.row.area }}</template>
	    </el-table-column>
	    
	    <el-table-column prop="name"  label="姓名"  width="120"></el-table-column>
	    <el-table-column    prop="address"	      label="地址" show-overflow-tooltip></el-table-column>
	    
	  </el-table>
	  <div style="margin-top: 20px">
	    <el-button @click="toggleSelection([tableData3[1], tableData3[2]])">切换第二、第三行的选中状态</el-button>
	    <el-button @click="toggleSelection()">取消选择</el-button>
	    
	    <el-button @click="deleteRow()">删除</el-button>
	  </div>
	</template>
</div>

 <div th:include="_footer_include :: #jsLib"></div>

<script>

 var vm = new Vue({
     el:'#tableOpt',
     data:{
    	  tableData3:[],
    	  multipleSelection:[],
     },
     methods:{
    	 getTableData:function (){
             axios.post('/demo/listTableData', {
                 firstName: 'Fred',
                 lastName: 'Flintstone'
               })
               .then(function (response) {
                 vm.tableData3=response.data;
               })
               .catch(function (error) {
                 console.log(error);
               });
         },
         toggleSelection(rows) {
             if (rows) {
               rows.forEach(row => {
                 this.$refs.multipleTable.toggleRowSelection(row);
               });
             } else {
               this.$refs.multipleTable.clearSelection();
             }
           },
           handleSelectionChange(val) {
        	   console.info(val);
             this.multipleSelection = val;
           },
           selectRow(row){
        	   //选中一行时间
        	 console.info("你选择了一行，id:"+row[0].id);
           },
           deleteRow(){
        	   var rows = this.multipleSelection;
        	   if(rows.length==0){
        		   this.$message({
       		          message: '没有选择数据',
       		          type: 'warning'
       		        });
        		   return;
        	   }
        	   var rowIds = [];
        	   for(var i=0;i<rows.length;i++){
        		   rowIds.push(rows[i].id)
        	   }
        	   alert(rowIds.join(","));
           }
     },
     created(){
         console.info("create method");
         this.getTableData();//初始化table 数据
     },
     mounted(){
        console.info("mounted method");
     }
     
 });
 
</script>
</body>
</html>